<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, eum
        illo mollitia itaque quis dolore possimus, accusantium provident
        voluptatum officia, deleniti debitis incidunt aperiam dignissimos.
        Officiis nemo pariatur eveniet veritatis.
      </p>
      <p class="eraser">
        <span class="text_box">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, eum
          illo mollitia itaque quis dolore possimus, accusantium provident
          voluptatum officia, deleniti debitis incidunt aperiam dignissimos.
          Officiis nemo pariatur eveniet veritatis.
        </span>
      </p>
    </div>
  </body>
  <style>
    body {
      background: #000;
      color: #fff;
    }
    .container {
      width: 400px;
      margin: 200px auto;
      line-height: 2;
      position: relative;
    }
    p {
      margin: 0;
      padding: 0;
      font-size: 18px;
    }
    .eraser {
      position: absolute;
      left: 0;
      top: 0;
    }

    .text_box {
      --p: 10%;
      background: linear-gradient(
        to right,
        #0000 var(--p),
        #000 calc(var(--p) + 100px)
      );
      color: transparent;
      animation: gradient 5s forwards;
    }

    @property --p {
      syntax: "<percentage>";
      initial-value: 0%;
      inherits: false;
    }

    @keyframes gradient {
      to {
        --p: 100%;
      }
    }
  </style>
</html>
